<%--
  Created by IntelliJ IDEA.
  User: 15890741124
  Date: 2022/8/9
  Time: 14:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="../common.jsp" %>
<html>
<head>
    <title>详细信息</title>
    <style>
        #show {
            width: 100%;
            height: 100%;
            /*border: 4px solid cornflowerblue;*/
            margin: auto;

            background: rgb(92, 217, 239);
            font-family: 华文行楷;
            font-size: 30px;
            /*绝对定位也行，但是父也不占位。包含块布局的时候一般父相对  父相子绝*/
        }

        #bb {
            width: 200px;
            height: 80px;
            margin: auto;
            line-height: 80px;
        }

        #result {
            width: 400px;
            height: 80px;
            margin: auto;
            line-height: 80px;

        }
    </style>
</head>
<body>
<%--查询--%>
<form class="layui-form" action="" style="margin-top: 20px">
    <div class="layui-inline">
        <label class="layui-form-label">姓名</label>
        <div class="layui-input-block">
            <input type="text" name="name" id="name" placeholder="请输入要查询的姓名" autocomplete="off"
                   class="layui-input">
        </div>
    </div>
    <div class="layui-inline">
        <label class="layui-form-label">测试计划ID</label>
        <div class="layui-input-inline">
            <select name="testPlanId" lay-filter="type" id="testPlanId">
                <%--                    js填充题目类型下拉选项--%>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <label class="layui-form-label">学生类型</label>
        <div class="layui-input-inline">
            <select name="studentType" lay-filter="type" id="questionman">
                <option selected value="1">查询所有</option>
                <option value="2">正常学生</option>
                <option value="3">问题学生</option>
                <option value="4">学习焦虑</option>
                <option value="5">对人焦虑</option>
                <option value="6">孤独倾向</option>
                <option value="7">自责倾向</option>
                <option value="8">过敏倾向</option>
                <option value="9">身体症状</option>
                <option value="10">恐怖倾向</option>
                <option value="11">冲动倾向</option>
            </select>
        </div>
    </div>

    <div class="layui-inline">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>
            <button class="layui-btn layui-btn-primary" id="reset" type="reset">重置</button>
        </div>
    </div>
</form>
<%--表格--%>
<table id="demo" lay-filter="test"></table>
<%--表格右侧标签--%>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-sm" lay-event="checkQuestion">查看问题</a>
    <a class="layui-btn layui-btn-sm" lay-event="return">回访记录</a>
    <a class="layui-btn layui-btn-sm" lay-event="check">分析</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除 </a>
</script>
<%--表格头标签--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="del">删除</button>
    </div>
</script>
<%-- 查看结果 --%>
<div id="show" style="width: 100%;height: 100%; display: none;">
    <div id="bb">MHT测试结果</div>
    <div id="result"></div>
    <div style="width: 100%;height: 350px;" id="shopping"></div>
    <div style="width: 100%;background: rgb(92, 217, 239);" id="explain"></div>
</div>
<from style="display: none" id="question-answer">
    欢迎查看<span id="username"></span>的答题
    <table id="demo2" lay-filter="test2"></table>
</from>


<%-- 添加表单  --%>
<form class="layui-form" action="" id="returnRecord"  lay-filter="returnRecord"  style="display: none">
    <div class="layui-form-item">
        <label class="layui-form-label">测试者id</label>
        <div class="layui-input-inline">
            <input type="text" name="testerId" placeholder="请输入问题序号"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">测试者姓名</label>
        <div class="layui-input-inline">
            <input type="text" name="testerName" placeholder="请输入问题"
                   autocomplete="off" class="layui-input">
        </div>
    </div>


    <div class="layui-form-item">
        <label class="layui-form-label">手机号</label>
        <div class="layui-input-inline">
            <input type="text" name="phone" placeholder="请输入手机号"
                   autocomplete="off" class="layui-input">
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">计划名称</label>
        <div class="layui-input-inline">
            <input type="text" name="testName" placeholder="请输入参加计划名称"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">回访记录</label>
        <div class="layui-input-inline">
          <textarea name="record"></textarea>
        </div>
    </div>

    <div class="layui-form-item">
        <label class="layui-form-label">备注</label>
        <div class="layui-input-inline">
            <input type="text" name="remark" placeholder="请输入备注"
                   autocomplete="off" class="layui-input">
        </div>
    </div>

    <div class="layui-form-item">
        <div class="layui-input-block">
            <button class="layui-btn" lay-submit lay-filter="addUserFilter">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        </div>
    </div>
</form>


</body>
<script>
    layui.config({
        version: 1,
        base: '${pageContext.request.contextPath}/js/' //这个就是你放Echart.js的目录
    })
    layui.use(['table', 'form', 'upload', 'jquery'], function () {
        var table = layui.table;
        var form = layui.form;
        var upload = layui.upload;
        var $ = layui.jquery;
        table.render({
            elem: '#demo'
            , height: 550
            , url: '${pageContext.request.contextPath}/testResultMht/queryAll.do'
            , dataType: 'json'
            , page: true //开启分页
            // ,toolbar:'default'
            , limits: [5, 10, 15, 20, 25, 30, 100, 200]//将每页几个写在这里，不想默认10个每页
            , autoSort: true//关闭自动排序
            , cols: [[
                {checkbox: 'checkbox', fixed: 'left'}//左侧复选框
                , {field: 'id', title: '测试者ID', width: 100, sort: true, fixed: 'left'}
                , {field: 'name', title: '姓名', width: 100}
                , {field: 'phone', title: '手机号', width: 150, sort: true}
                , {field: 'createTime', title: '测试时间', width: 200, sort: true}
                , {field: 'testPlanId', title: '测试计划id', width: 80, sort: true, hide: true}
                , {field: 'testName', title: '测试计划名称', width: 100, sort: true}
                , {
                    field: 'status', title: '删除标志', width: 80, sort: true,
                    templet: function (d) {
                        if (d.status == 0) {
                            return '<span  class="layui-btn layui-btn-xs" lay-event="state">可用</span>'
                        }
                        return '<span class="layui-btn layui-btn-xs layui-btn-danger" lay-event="state">已删除</span>'
                    }
                }
                , {field: 'total', title: '总分', width: 80, sort: true}
                , {
                    field: 'validity', title: '效度评估', width: 80, sort: true,
                    templet: function (d) {
                        if (d.validity <= 7) {
                            return '<span  class="layui-btn layui-btn-xs" lay-event="state">合格</span>'
                        }
                        return '<span class="layui-btn layui-btn-xs layui-btn-danger" lay-event="state">重做</span>'
                    }
                }
                , {field: 'study', title: '学习焦虑', width: 80, sort: true}
                , {field: 'people', title: '对人焦虑', width: 80, sort: true}
                , {field: 'loneliness', title: '孤独焦虑', width: 80, sort: true}
                , {field: 'remorse', title: '自责倾向', width: 80, sort: true}
                , {field: 'allergies', title: '过敏倾向', width: 80, sort: true}
                , {field: 'terror', title: '恐怖倾向', width: 80, sort: true}
                , {field: 'impulsion', title: '冲动倾向', width: 80, sort: true}
                , {field: 'body', title: '身体症状', width: 80, sort: true}
                //右侧操作栏
                , {fixed: 'right', title: '操作', width: 350, align: 'center', toolbar: '#barDemo'}
            ]]
            , toolbar: "#toolbarDemo"//头部操作栏
        });

        //查询测试计划id
        $.ajax({
            url: "${pageContext.request.contextPath}/testResultMht/getPlanId.do",
            type: "post",
            dataType: "json",
            success: function (data) {
                //将dept表中的数据添加到下拉列表中去
                if (data.code == 0) {
                    var htmlStr = "<option value='' >选择测试计划<option>";
                    for (let i = 0; i < data.data.length; i++) {
                        htmlStr += "<option value = " + data.data[i].id + ">" + data.data[i].test_name + "<option>"
                    }
                    $("#testPlanId").html(htmlStr);
                    layui.use('form', function () {
                        var form = layui.form;
                        form.render('select');
                    });
                }
            }
        });


        //触发头部工具栏
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id)
                , data = checkStatus.data; //获取选中的数据
            switch (obj.event) {
                case "del":
                    if (data.length === 0) {
                        layer.msg('请选择一行');
                    } else {
                        //定义一个数组，封装所有的id
                        var ids = [];
                        //循环所有选中的行
                        for (let i = 0; i < data.length; i++) {
                            ids[i] = data[i].id;
                        }
                        layer.confirm('真的删除行么', function (index) {
                            $.ajax({
                                url: "${pageContext.request.contextPath}/testResultMht/deleteMht.do",
                                data: {id: ids.join(",")},
                                //响应的数据类型
                                dataType: "JSON",
                                type: "POST"
                                //异步请求
                                // async: true,
                                //成功的回调
                                , success: function (data) {
                                    if (data.code == 0) {
                                        layer.closeAll();//关闭所有
                                        table.reload('demo'
                                            , {
                                                page: {
                                                    curr: 1
                                                    //重新从第 1 页开始
                                                }
                                            });//刷新表格
                                    }
                                    layer.msg(data.msg);
                                }
                            });

                        });
                    }
                    break;

                default:
                    break;
            }
        });

        //监听右侧工具栏事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            switch (obj.event) {
                case "del":
                    layer.confirm('真的删除行么', function (index) {
                        $.ajax({
                            url: "${pageContext.request.contextPath}/testResultMht/deleteMht.do",
                            data: {"id": obj.data.id},
                            //响应的数据类型
                            dataType: "JSON",
                            type: "POST",
                            //异步请求
                            // async: true,
                            //成功的回调
                            success: function (data) {
                                if (data.code == 0) {
                                    layer.closeAll();
                                    table.reload('demo');
                                }
                                layer.msg(data.msg);
                            }
                        });
                    });

                    break;
                case "check":
                    //layer.msg('查看操作');
                    //弹出层
                    layer.open({
                        title: 'MHT测试结果图示',
                        type: 1,
                        content: $('#show'), //这里content是一个DOM，注意：最好该元素要存放在body最外层，否则可能被其它的相对元素所影响
                        area: ['600px', '600px']
                    });

                    var validity = obj.data.validity;
                    var total = obj.data.total;
                    var body = obj.data.body;
                    var study = obj.data.study;
                    var people = obj.data.people;
                    var loneliness = obj.data.loneliness;
                    var remorse = obj.data.remorse;
                    var allergies = obj.data.allergies;
                    var terror = obj.data.terror;
                    var impulsion = obj.data.impulsion;
                    var myChart = echarts.init(document.getElementById('shopping'));
                    var option = {
                        title: {
                            text: 'MHT心理测试'
                        },
                        legend: {
                            data: ['你的成绩', '标准得分']
                        },
                        radar: {
                            // shape: 'circle',
                            indicator: [
                                {name: '学习焦虑', max: 15},
                                {name: '对人焦虑', max: 10},
                                {name: '孤独倾向', max: 10},
                                {name: '自责倾向', max: 10},
                                {name: '过敏倾向', max: 10},
                                {name: '身体症状', max: 15},
                                {name: '恐怖倾向', max: 10},
                                {name: '冲动倾向', max: 10}
                            ],
                            // center: ['75%', '50%'],
                            radius: 120,
                            axisName: {
                                color: '#fff',
                                backgroundColor: '#666',
                                borderRadius: 3,
                                padding: [3, 5]
                            }
                        },
                        series: [
                            {
                                name: 'Budget vs spending',
                                type: 'radar',//雷达图类型
                                data: [
                                    {
                                        value: [study, people, loneliness, remorse, allergies, body, terror, impulsion],
                                        name: '你的成绩',
                                        lineStyle: {
                                            type: 'dashed'
                                        },

                                        label: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            }
                                        }
                                    },
                                    {
                                        value: [8, 8, 8, 8, 8, 8, 8, 8],
                                        name: '标准得分',
                                        label: {
                                            show: true,
                                            formatter: function (params) {
                                                return params.value;
                                            }
                                        }
                                    }
                                ]
                            }
                        ]
                    };
                    myChart.setOption(option);

                    var htmlStr = "";
                    if (body > 8) {
                        htmlStr += "<div><h3 align='center'>身体症状</h3>&nbsp;&nbsp;&nbsp;&nbsp;你在极度焦虑的时候，会出现呕吐失眠、小便失禁等明显症状。这类被试必须接受为他制定的有针对性的特别指导计划。 </div>"
                    }
                    if (study > 8) {
                        htmlStr += "<div><h3 align='center'>学习焦虑</h3>&nbsp;&nbsp;&nbsp;&nbsp;你对考试怀有恐惧心理，无法安心学习，十分关心考试分数。这类被试必须接受为他制定的有针对性的特别指导计划。</div>"
                    }
                    if (people > 8) {
                        htmlStr += "<div><h3 align='center'>对人焦虑</h3>&nbsp;&nbsp;&nbsp;&nbsp;你过分注重自己的形象，害怕与人交往，退缩。这类被试必须接受为他制定的有针对性的特别指导计划。</div>"
                    }
                    if (loneliness > 8) {
                        htmlStr += "<div><h3 align='center'>孤独倾向</h3>&nbsp;&nbsp;&nbsp;&nbsp;你孤独、抑郁不善与人交往，自我封闭。这类被试必须接受为他制定的有针对性的特别指导计划。</div>"
                    }
                    if (remorse > 8) {
                        htmlStr += "<div><h3 align='center'>自责倾向</h3>&nbsp;&nbsp;&nbsp;&nbsp;你自卑、常怀疑自己的能力、常将失败、过失归咎于自己。这类被试必须接受为他制定的有针对性的特别指导计划。 </div>"
                    }
                    if (allergies > 8) {
                        htmlStr += "<div><h3 align='center'>过敏倾向</h3>&nbsp;&nbsp;&nbsp;&nbsp;你过于敏感，容易为一些小事而烦恼。这类被试必须接受为他制定的有针对性的特别指导计划。</div>"
                    }
                    if (terror > 8) {
                        htmlStr += "<div><h3 align='center'>恐怖倾向</h3>&nbsp;&nbsp;&nbsp;&nbsp;你对某些事物，如黑暗等，有较严重的恐惧感。这类被试必须接受为他制定的有针对性的特别指导计划。</div>"
                    }
                    if (impulsion > 8) {
                        htmlStr += "<div><h3 align='center'>冲动倾向</h3>&nbsp;&nbsp;&nbsp;&nbsp;你十分冲动，自制力差。这类被试必须接受为他制定的有针对性的特别指导划。 </div>"
                    }
                    if (obj.data.total > 65) {
                        htmlStr += "<div style='padding-bottom: 100px'><h3 align='center'>总结</h3>你的总成绩在65分以上，说明你存在一定的心理障碍这种人在日常生活中有不适应行为，有的可能表现为攻击和暴力行为等，因而需要制定特别的个人指导计划。</div>"

                    }

                    $("#explain").html(htmlStr);

                    break;
                case "checkQuestion":
                    $("#username").html(data.name);
                    table.render({
                        elem: '#demo2'
                        , height: 550
                        , url: '${pageContext.request.contextPath}/testResultMht/queryQuestionMHT.do?id='+data.id
                        , dataType: 'json'
                        , page: true //开启分页
                        , limit: 10
                        , limits: [5, 10,20,50,100]
                        , autoSort: true//关闭自动排序
                        , cols: [[
                            {checkbox: 'checkbox', fixed: 'left'}//左侧复选框
                            , {field: 'id', title: '问题id', width: 100, sort: true, fixed: 'left'}
                            , {field: 'question', title: '问题', width: 100}
                            , {field: 'result', title: '答案', width: 150, sort: true}
                            , {field: 'dictionary_name', title: '题目类型', width: 150, sort: true}
                        ]]
                    });
                    layer.open({//弹出修改框
                        title: '修改',
                        type: 1,
                        content: $("#question-answer"),
                        area: ('600px', '600px')
                    });

                    break;
                /**
                 * 预留回访
                 */
                case "return":
                    form.val("returnRecord", {
                        "testerId": data.id
                        , "testName": data.testName
                        , "testerName": data.name
                        , "phone": data.phone
                        , "remark": data.remark
                    });
                    layer.open({//弹出修改框
                        title: '添加回访记录',
                        type: 1,
                        content: $("#returnRecord"),
                        area: ('400px', '360px')
                    });

                    break;
                default:
                    break;
            }
        });


        form.on('submit(addUserFilter)', function (data) {
            $.ajax({
                url: "${pageContext.request.contextPath}/testResultMht/insertReturn.do"
                , data: data.field
                , dataType: "json"
                , type: "POST",
                success: function (data) {
                    if (data.code == 0) {
                        layer.closeAll();
                        table.reload('demo', {
                            page: {
                                curr: 1
                                //重新从第 1 页开始
                            }
                        });
                    }
                    layer.msg(data.msg);
                }
            });
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });


        //查询问题
        form.on('submit(formDemo)', function (data) {
            table.reload('demo', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    name: data.field.name
                    , testPlanId: data.field.testPlanId
                    , studentType: data.field.studentType
                }
            });
            return false;
        });


        //重置查询条件
        $("#reset").click(function () {
            table.reload('demo', {
                where: { //请求参数（注意：这里面的参数可任意定义，并非下面固定的格式）
                    name: "" //第一个查询条件
                    , testPlanId: ""
                    , studentType: ""
                },
                page: {
                    curr: 1
                    //重新从第 1 页开始
                },
            });
        });

    });


</script>
</html>
